<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper" class="theme-main-bg-color color-white">
			<nii-navbar :globalData="globalData" :scroll="scroll" back>
				<!-- <view slot="back"></view> -->
				<view slot="title">{{renders.main_title}}</view>
				<!-- <view slot="tools"></view> -->
			</nii-navbar>
		</view>
		<view id="content_wrapper" class=" ">
			<view id="title" class="theme-main-bg-color py-50">
				<view class="title">
					<view class="title_container">
						<view class="title_contents d-flex align-items-center">
							<view class="right overflow-hidden px-20">
								<image class="img" :src="renders.logo"></image>
							</view>
							<view class="left text-white">
								<view class="sub_title">
									{{ renders.title }}
								</view>
								<view class="desc">
									{{ renders.desc }}
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view id="form" class="bg-white mx-20 b-r20 pb-90">
				<view class="form px-20 pt-20">
					<view class="form_container">
						<view class="form_contents">
							<!-- <view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-26 d-flex j-sb">
										<view class="font-weight">
											用户名
										</view>
										<view class="co_blue">
											已有账号，立即登录
										</view>
									</view>
									<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20 px-30 py-20 font-28 mt-20" placeholder-class="less_text" placeholder="请输入用户名（字母+数字组合）">
								</view>
							</view> -->
							<view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-26 font-weight">
										手机号码
									</view>
									
									<view class="d-flex a-center input ba_F4F4F6 b-r20 px-30 py-20 font-28 mt-20">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="flex-1" placeholder-class="less_text" placeholder="请输入手机号码">
										
										<view class="tool text-nowrap font-weight" v-if="data.sections.yzm === 60" @click="sendBindCode">{{ renders.yzm.default }}</view>
										<view class="tool text-nowrap less_text font-weight" v-else>{{ renders.yzm.send.replace('{s}', data.sections.yzm) }}</view>
									</view>
								</view>
							</view>
							<view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-26 font-weight">
										验证码
									</view>
									<input type="text" inputmode="numeric" v-model="renders.formData.yzm" class="input ba_F4F4F6 b-r20 px-30 py-20 font-28 mt-20" placeholder-class="less_text" placeholder="请输入手机验证码">
								</view>
							</view>
							
							<!-- <view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-24 co_666">
										验证码已发送至手机号码 13800000001
									</view>
									<view class="d-flex j-sb">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20  font-28 mt-20 wh100"
										 placeholder-class="less_text" placeholder="">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20  font-28 mt-20 wh100"
										 placeholder-class="less_text" placeholder="">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20  font-28 mt-20 wh100"
										 placeholder-class="less_text" placeholder="">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20  font-28 mt-20 wh100"
										 placeholder-class="less_text" placeholder="">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20  font-28 mt-20 wh100"
										 placeholder-class="less_text" placeholder="">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20 font-28 mt-20 wh100"
										 placeholder-class="less_text" placeholder=""> 
									</view>
									
								</view>
							</view> -->
							<!-- 
							<view class="form_group">
								<view class="form_control d-flex justify-content-between align-items-center">
									<view class="iconfont icon-huiyuan"></view>
									<input type="text" v-model="renders.formData.invite_code" inputmode="numeric" class="input fw-bold w-fill-available" placeholder-class="less_text" placeholder="邀请码">
								</view>
							</view>
							<view class="form_group">
								<view class="form_control d-flex justify-content-between align-items-center">
									<view class="iconfont icon-mima"></view>
									<input type="number" v-model="renders.formData.yzm" inputmode="numeric" class="input fw-bold w-fill-available" placeholder-class="less_text" placeholder="请输入验证码">
									<view class="tool text-nowrap" v-if="data.sections.yzm === 60" @click="sendBindCode">{{ renders.yzm.default }}</view>
									<view class="tool text-nowrap less_text" v-else>{{ renders.yzm.send.replace('{s}', data.sections.yzm) }}</view>
								</view>
							</view> -->
							<view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-26 font-weight">
										登录密码
									</view>
									<view class="d-flex j-sb ba_F4F4F6 b-r20 px-30 py-20 font-28 mt-20">
										<input type="password" v-model="renders.formData.password" class="input " placeholder-class="less_text" placeholder="请设置账户的登录密码">
										<view class="iconfont icon-mima co_666"></view>
									</view>
									
								</view>
							</view>
							<view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-26 font-weight">
										支付密码
									</view>
									<view class="d-flex j-sb ba_F4F4F6 b-r20 px-30 py-20 font-28 mt-20">
										<input type="password" v-model="renders.formData.pay_password" class="input " placeholder-class="less_text" placeholder="请设置账户的支付密码">
										<view class="iconfont icon-mima co_666"></view>
									</view>
									
								</view>
							</view>
							<!-- 请再次输入你的密码 -->
							<!-- <view class="form_group">
								<view class="form_control d-flex justify-content-between align-items-center">
									
									<input type="safe-password" v-model="renders.formData.password_confirm" inputmode="text" class="input fw-bold w-fill-available" placeholder-class="less_text" placeholder="请再次输入你的密码">
								</view>
							</view> -->
							
							<view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-26 font-weight">
										邀请码
									</view>
									<input type="text" v-model="renders.formData.invite_code" inputmode="numeric" class="input ba_F4F4F6 b-r20 px-30 py-20 font-28 mt-20 font-weight" placeholder-class="less_text" placeholder="邀请码">
								</view>
							</view>
							<!-- <view class="form_group mt-40">
								<view class="form_control" >
									<view class="font-26 font-weight">
										邀请码
									</view>
									<view class="d-flex j-sb a-center mt-20">
										<input type="tel" inputmode="tel" v-model="renders.formData.mobile" class="input ba_F4F4F6 b-r20 px-30 py-20 font-28 flex-1" placeholder-class="less_text" placeholder="请输入邀请人邀请码">
										<view class="ml-30 ba_blue text-white b-r20 px-50 py-20 font-26">立即查询</view>
									</view>
								</view>
							</view> -->
							
							
							<view id="submit">
								<view class="submit d-padding">
									<view class="submit_container">
										<view class="font-32 submit_contents py-28 b-r20 ba_blue mt-100 d-flex j-center a-center color-white theme-main-bg-color" @click="submitAction">
											{{ renders.submit }}
										</view>
									</view>
									
								</view>
							</view>
							<view id="agreements" class="mt-60 ">
								<view class="agreements d-padding">
									<view class="agreements_container">
										<view class="agreements_contents d-flex justify-content-center align-items-center">
											<view class="radio" @click="shows.agreements = !shows.agreements">
												<radio :checked="shows.agreements" style="transform: scale(0.5)" color="#FFCC33" />
											</view>
											<view class="right d-flex justify-content-center align-items-center">
												<view class="text">{{ renders.agreements.text }}</view>
												<view class="agreement theme-main-color fw-bolder" v-for="(agreement, agreement_index) in renders.agreements.lists" :key="agreement_index" @click="navigateAction(agreement.alias, agreement.params)">{{ agreement.name }}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {
					agreements: false,
				},
				renders: {
					title: '',
					desc: '',
					logo: '',
					formData: {
						mobile: '',
						password: '',
						pay_password: '',
						password_confirm: '',
						yzm: '',
						invite_code: ''
					},
					yzm: {
						default: '',
						send: ''
					},
					agreements: {
						text: '',
						lists: [{name: '', alias: '', params: {}}],
					},
					submit: ''
				},
				data: {
					sections: {
						yzm: 60,
						
						redirect_uri: '',
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType); },
			//拨打电话
			callPhone: function(mobile) {uni.makePhoneCall({phoneNumber: mobile});},
			//复制数据
			clipboardData: function (text) {const that = this;that.nii_common.clipboardData(text);},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;				
				//发起请求
				that.nii_common.request.build('register/information', that.options, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置数据
					that.renders = res.data;
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			submitAction: function() {
				//设置对象
				let that = this;
				if(that.shows.agreements){
					if (!uni.$u.test.mobile(that.renders.formData.mobile)) {
						//提示信息
						return that.nii_common.toastAlert('请输入有效手机号码');
					}
					//loading
					!that.ready && that.nii_common.toastLoading('加载中');
					// 获取初始数据
					that.nii_common.request.build('register/action', that.renders.formData, 'POST', function(res) {
						//提示成功
						that.nii_common.toastAlert('注册成功');
						//跳转页面
						that.loginComplate(true);
					}, function(res) {
						//提示失败
						that.nii_common.toastAlert(res.msg);
					}, function() {
						//隐藏loading
						that.nii_common.toastLoadingHide();
					});
				}else{
					return that.nii_common.toastAlert('请先同意用户协议');
				}
			},
			loginComplate: function(complete = false) {
				//判断是否完成
				if (complete && this.data.sections.redirect_uri.length > 0) {
					//跳转页面
					this.navigateAction(this.data.sections.redirect_uri, {}, 'launch');
				} else {
					//跳转首页
					this.navigateAction('account.account');
				}
			},
			sendBindCode: function() {
				//获取对象
				const that = this;
				//验证数据
				if (!uni.$u.test.mobile(that.renders.formData.mobile)) {
					//提示信息
					return that.nii_common.toastAlert('请输入有效手机号码');
				}
				//loading
				that.nii_common.toastLoading('正在发送...');
				//发送请求
				that.nii_common.request.build('v2/send_code', {
					mobile: that.renders.formData.mobile
					// alias: 'bind'
				}, 'POST', function(res) {
					//设置验证码
					that.data.sections.yzm = 60;
					//开启定时器
					var timer = setInterval(function() {
						//更新验证码
						that.data.sections.yzm -= 1;
						//判断数量
						if (that.data.sections.yzm <= 0) {
							//设置验证码
							that.data.sections.yzm = 60;
							//关闭定时器
							clearInterval(timer);
						}
					}, 1000);
					//提示成功
					that.nii_common.toastAlert('发送成功');
				}, function(res) {
					//提示失败
					that.nii_common.toastAlert(res.msg);
				}, function() {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	// 引入项目主题颜色
	@import "@/nii_common/theme.scss";
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		#navbar_back {
			color: #FFFFFF;
		}
		.domxee_icon {			
			font-size: 36rpx;
			line-height: 60rpx;
			margin-right: 20rpx;
		}
		.domxee_icon:last-child {
			margin-right: 0;
		}
	}
	#content_wrapper {
		padding-bottom: 180rpx;
		#title {
			// margin-top: 60rpx;
			.title {
				.title_container {
					.title_contents {
						.left {
							margin-right: 30rpx;
							.sub_title {
								font-size: 44rpx;
								line-height: 60rpx;
							}
							.desc {
								font-size: 24rpx;
								line-height: 34rpx;
								margin-top: 10rpx;
							}
						}
						.right {
							width: 110rpx;
							height: 110rpx;
							.img {
							width: 110rpx;
							height: 110rpx;
							}
						}
					}
				}
			}
		}
		#form {
			margin-top: -20rpx;
			.form {
				.form_container {
					.form_contents {
						.form_group {
							
							background: #FFFFFF;
							border-radius: 20rpx;
							.form_control {
								.iconfont {
									
								}
								.input {
									// font-size: 28rpx;
									// line-height: 40rpx;
								}
								.tool {
									margin-left: 40rpx;
									font-size: 30rpx;
									line-height: 40rpx;
								}
							}
							
						}
						.form_group:first-child {
							
						}
					}
				}
			}
		}
		#agreements {
			
			.agreements {
				.agreements_container {
					.agreements_contents {
						.radio {
							margin-right: 20rpx;
						}
						.right {
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
				}
			}
		}
		#submit {
			
		}
		
		
		
	}
</style>
